<!DOCTYPE html>
<html>
    <head>
        <title>方差计算器</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <style>
            body{
                background: linear-gradient(
                    160deg, rgb(0,144,255), rgb(0,255,213));
                height:100vh;
                margin:0;
            }

            .main{
                background: rgba(255, 255, 255, 0.5);
                padding:5%;
                margin:5%;
            }

            .button{
                font-size: 6vh;
                border: 0;
                margin: 0;
                padding: 0;
                border-radius: 4vh;
                box-shadow: black;
                background: linear-gradient(160deg, rgb(226, 29, 29), rgb(255, 208, 0));
                font-family: SimHei, 微软雅黑;
                outline: none;
                box-shadow: 0 0 2vh #999999;
                transition: box-shadow 0.5s;
            }
            
            .button:hover{
                box-shadow: 0 0 2vh blue;
            }

            #inputBar{
                font-size: 6vh;
                border: 0;
                margin: 0;
                padding: 0vh;
                border-radius: 4vh;
                padding-left: 1vh !important;
                box-shadow: black;
                font-family: SimHei, 微软雅黑; 
                box-shadow: 0 0 2vh #999999;
                transition: box-shadow 0.5s;
            }

            #inputBar:hover{
                box-shadow: 0 0 2vh blue;
            }

            #inputBar:focus{
                box-shadow: 0 0 2vh green;
            }

            #arrayShowingBar{
                font-size: 6vh;
                font-family: SimHei, 微软雅黑;
                text-align: center;
                padding:2vh;
            }

            #resultShowingBar{
                font-size: 6vh;
                font-family: SimHei, 微软雅黑;
                text-align: center;
                padding:2vh;
            }

            .closeIcon{
                width:6vh;
                height:6vh;
                border-radius: 4vh;
                font-size:6vh;
                background:rgb(255, 0, 0);
                box-shadow: 0 0 2vh #aaaaaa;
                transition: box-shadow 0.5s;
            }

            .closeIcon:hover{
                box-shadow: 0 0 2vh blue;
            }

            .closeIconChild{
                position: relative;
                top:-0.95vh;
                color: white;
            }

            .arrayChild{
                float:left;
                font-size: 6vh;
            }
        </style>

        <script>
            var list = [];

            function DeleteArrayByIndex(i){
                // alert("hi");
                list.splice(i, 1);
                // UpdateResultShowingBar();
                var bar = document.getElementById("arrayShowingBar");
                bar.innerHTML = "";
                bar.innerHTML += "<div class='arrayChild'>当前列表: [</div>";
                for(var i = 0; i < list.length; i++){
                    if(i != 0){
                        bar.innerHTML += "<div class='arrayChild'>,&nbsp;&nbsp;</div>";
                    }
                    bar.innerHTML += 
                        "<div class='arrayChild'>" + list[i] +
                            "<div onclick='DeleteArrayByIndex(" + i + ")' class='closeIcon' style='float:right;'>" +
                                "<div class='closeIconChild'>x</div>" +
                            "</div>" + 
                        "</div>";
                }
                bar.innerHTML += "<div class='arrayChild'>]</div>";
            }

            function UpdateArrayShowingBar(){
                // Show on the bar
                var bar = document.getElementById("arrayShowingBar");
                bar.innerHTML = "";
                bar.innerHTML += "<div class='arrayChild'>当前列表: [</div>";
                for(var i = 0; i < list.length; i++){
                    if(i != 0){
                        bar.innerHTML += "<div class='arrayChild'>,</div>";
                    }
                    bar.innerHTML += 
                        "<div class='arrayChild'>" + list[i] +
                            "<div onclick='DeleteArrayByIndex(" + i + ")' class='closeIcon' style='float:right;'>" +
                                "<div class='closeIconChild'>x</div>" +
                            "</div>" + 
                        "</div>";
                }
                bar.innerHTML += "<div class='arrayChild'>]</div>";
            }

            function ClearResultShowingBar(){
                document.getElementById("resultShowingBar").innerHTML = "";
            }

            function UpdateResultShowingBar(averange, variance){
                // Show on the bar
                document.getElementById("resultShowingBar").innerHTML =
                    "<div>平均数: " + averange + "</div>" +
                    "<div>方差: " + variance + "</div>" +
                    "<center><div onclick='ClearResultShowingBar()' class='closeIcon''><div class='closeIconChild'>x</div></div></center>";
            }

            function SubmitToArray(){
                // Get the value inside input bar
                var value = document.getElementById("inputBar").value;
                var num = parseFloat(value);
                list[list.length] = num;

                // Clear the input bar
                document.getElementById("inputBar").value = "";

                // Update showing bar
                UpdateArrayShowingBar();
            }

            function ClearArray(){
                // Clear the array
                list = [];

                // Update show bar
                UpdateArrayShowingBar();
            }

            function Claculate(){
                // Calculate Averange
                var total = 0;
                for(var i = 0; i < list.length; i++){
                    total += list[i];
                }
                var averange = total / list.length;

                // Calculate variance
                var totalError = 0;
                for(var i = 0; i < list.length; i++){
                    var tmp = list[i] - averange;
                    totalError += tmp * tmp;
                }
                var variance = totalError / list.length;

                UpdateArrayShowingBar();
                UpdateResultShowingBar(averange, variance);
            }

            function Press(i){
                document.getElementById("inputBar").value += i;
            }
            
            function DeleteSingleChar(){
                var bar = document.getElementById("inputBar");
                bar.value = bar.value.substr(0, bar.value.length - 1);
            }

            window.onload = function(){
                UpdateArrayShowingBar();
            }
        </script>
    </head>
    <body>
        <div class="main">
            <div id="arrayShowingBar"></div>

            <div id="placeHolder" style="clear:both !important;">&nbsp;</div>
            <input id="inputBar" style="width:30%;height:7vh;font-size:4vh !important;">
            <button class="button" style="width:20%;height:7vh;font-size:4vh !important;" onclick="ClearArray()"    >清空</button>
            <button class="button" style="width:20%;height:7vh;font-size:4vh !important;" onclick="SubmitToArray()" >提交</button>
            <button class="button" style="width:20%;height:7vh;font-size:4vh !important;" onclick="Claculate()"     >计算</button>

            <div id="resultShowingBar"></div>

            <div style="padding: 1vh;clear: both;">
                <button class="button" style="width:31%;" onclick="Press('1')">1</button>
                <button class="button" style="width:31%" onclick="Press('2')">2</button>
                <button class="button" style="width:31%" onclick="Press('3')">3</button>
            </div>
            <div style="padding: 1vh;">
                <button class="button" style="width:31%" onclick="Press('4')">4</button>
                <button class="button" style="width:31%" onclick="Press('5')">5</button>
                <button class="button" style="width:31%" onclick="Press('6')">6</button>
            </div>
            <div style="padding: 1vh;">
                <button class="button" style="width:31%" onclick="Press('7')">7</button>
                <button class="button" style="width:31%" onclick="Press('8')">8</button>
                <button class="button" style="width:31%" onclick="Press('9')">9</button>
            </div>
            <div style="padding: 1vh;">
                <button class="button" style="width:31%" onclick="Press('.')">.</button>
                <button class="button" style="width:31%" onclick="Press('0')">0</button>
                <button class="button" style="width:31%" onclick="DeleteSingleChar()">←</button>
            </div>
        </div>
    </body>
</html>